<style>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
</style>
<template>
  <Modal v-model="show" :title="title" @on-cancel="hideModal">
    <Spin size="large" fix v-if="spinShow" class="demo-spin-col">
      <Icon type="load-c" size="18" class="demo-spin-icon-load"></Icon>
      <div>正在上传</div>
    </Spin>
    <slot name="notice"></slot>
    <HorizonUploader2
      ref="uploader"
      accept="application/zip, application/x-zip, application/x-zip-compressed"
      :format="['zip']"
      v-model="file"
    ></HorizonUploader2>
    <div slot="footer">
      <Button type="primary" @click="handleSubmit">点击上传</Button>
    </div>
  </Modal>
</template>
<script>
import modalMixin from "./modalMixin";
import HorizonUploader2 from "./components/HorizonUploader2.vue";
import Utils from "../../libs/util";

import { registFeatureBatch } from "../../controllers/user";

export default {
  name: "UploadFeatureModal",
  mixins: [modalMixin],
  components: {
    HorizonUploader2
  },
  props: {
    user_type: {
      type: String,
      default: "register",
      validator(value) {
        return Utils.oneOf(value, ["stranger", "register"]);
      }
    },
    file_type: {
      type: String,
      default: "feature",
      validator(value) {
        return Utils.oneOf(value, ["avatar", "feature"]);
      }
    },
    title: {
      type: String,
      default: "上传"
    }
  },
  data() {
    return {
      file: "",
      spinShow: false
    };
  },
  methods: {
    handleSubmit() {
      if (!this.file) {
        this.$Message.info("请先选择文件");
        return;
      }
      console.log("start it");
      let data = new FormData();
      data.append("image_zip", this.file);
      data.append("user_type", this.user_type);
      data.append("file_type", this.file_type);

      this.spinShow = true;
      registFeatureBatch(data).then(json => {
        console.log(json);
        if (json.code == 0) {
          let msg = "<p>" + json.msg.split("\r\n").join("<br/>") + "</p>";

          this.$Modal.info({
            title: "批量上传处理结果",
            content: `${msg}`,
            onOk: () => {
              this.hideModal();
            }
          });
        }
      });
    },
    hideModal() {
      this.file = "";
      this.show = false;
      this.spinShow = false;
    }
  }
};
</script>